<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      :before-close="handleClose"
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>建卡模式配置</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <!-- 配置信息 -->
      <div class="bg-white mt-[10px]">
        <BaseHead>配置信息</BaseHead>
        <div class="p-[10px]">
          <el-form :model="addForm" label-width="130px">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="建卡模式">
                  <el-radio-group v-model="radio">
                    <el-radio :value="3">多张卡</el-radio>
                    <el-radio :value="6"
                      >单张卡（项目负责人为经费卡负责人）</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="建卡人员范围">
                  <el-radio-group v-model="radio">
                    <el-radio :value="3">校内人员中建卡</el-radio>
                    <el-radio :value="6"
                      >项目组成员内建卡（校内人员中建卡时，将会自动将经费卡负责人同步到对应项目成员中）</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="额度分配方式">
                  <el-radio-group
                    v-model="radio"
                    class="flex flex-col items-start"
                  >
                    <el-radio :value="6"
                      >按留校额度分配（项目首次入账时，负责人一次性将总留校预算分配给不同成员，后续入账不再分配额度。当每个项目一张卡时不需分配留校额度）</el-radio
                    >
                    <el-radio :value="6"
                      >按入账额度分配（项目每次入账时，负责人将本次入账经费分配给不同成员。）</el-radio
                    >
                    <el-radio :value="6"
                      >负责人确定（项目首次入账时，负责人确认“按留校额度分配”或是“按入账额度分配”。）</el-radio
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="p-[50px]">
          说明：如果子分类没有设置参数，父分类设置参数时将批量应用到子分类上；
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary">保存</el-button>
            <el-button type="primary" @click="dialogVisible = false"
              >关闭</el-button
            >
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
const dialogVisible = defineModel();
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
